import { useState } from "react";
import { Button } from "@nutui/nutui-react-taro";
import { getReportStatus, applyReport } from "@/axios/report";
import { View, Image } from "@tarojs/components";
import successIcon from "@/img/comm/success.svg";
import errorIcon from "@/img/comm/error.svg";
import waitingIcon from "@/img/comm/waiting.svg";
import Taro, { useDidShow } from "@tarojs/taro";
import uploadIcon from "@/img/comm/upload.svg";
import "./index.scss";

interface ApplyIndexProps {
  handleClickShow?: () => void;
}

const ApplyIndex: React.FC<ApplyIndexProps> = (props) => {
  const { handleClickShow } = props;
  const [status, setStatus] = useState<number>(0);

  const handleClickApply = async () => {
    try {
      setStatus(1);
      await applyReport();
      // setStatus(3);
      getStatus();
    } catch {
      setStatus(2);
    }
  };

  const getStatus = async () => {
    try {
      Taro.showLoading({
        mask: true,
        title: "loading...",
      });
      const results = await getReportStatus();
      Taro.hideLoading();
      setStatus(results);
    } catch {}
  };

  useDidShow(() => {
    getStatus();
  });

  const renderNodeByStatus = () => {
    switch (status) {
      case 0:
        return (
          <View className="info_box flex_column">
            <Image className="show_icon" src={uploadIcon} />
            <View className="show_text">个性化建议需申请</View>
            <Button
              className="apply_btn"
              type="info"
              onClick={handleClickApply}
            >
              申请个性化建议
            </Button>
          </View>
        );
      case 1:
        return (
          <View className="info_box flex_column">
            <Image className="show_icon" src={waitingIcon} />
            <View className="show_text">个性化建议制作中,请稍后...</View>
          </View>
        );
      case 2:
        return (
          <View className="info_box flex_column">
            <Image className="show_icon" src={successIcon} />
            <View className="show_text">学生全部完成后才能提供个性化建议</View>
          </View>
        );
      default:
        return (
          <View className="info_box flex_column">
            <Image className="show_icon" src={errorIcon} />
            <View className="show_text">后台制作已完成</View>
            <Button className="apply_btn" type="info" onClick={handleClickShow}>
              查看建议
            </Button>
          </View>
        );
    }
  };

  return (
    <View className="apply_index">
      <View className="apply_body">{renderNodeByStatus()}</View>
    </View>
  );
};

export default ApplyIndex;
